<template>
  <div class="about">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>关于项目</span>
        </div>
      </template>
      
      <div class="about-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <h3>项目介绍</h3>
            <p>
              这是一个基于 Vue3 + Node.js + MySQL 的全栈项目，展示了现代Web开发的最佳实践。
              项目采用前后端分离架构，提供了完整的用户管理功能。
            </p>
            
            <h3>技术栈</h3>
            <el-timeline>
              <el-timeline-item timestamp="前端技术" placement="top">
                <el-card>
                  <h4>Vue 3.3.4</h4>
                  <p>渐进式JavaScript框架，使用Composition API</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="UI组件库" placement="top">
                <el-card>
                  <h4>Element Plus</h4>
                  <p>基于Vue 3的桌面端组件库</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="构建工具" placement="top">
                <el-card>
                  <h4>Vite</h4>
                  <p>快速的前端构建工具</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="状态管理" placement="top">
                <el-card>
                  <h4>Pinia</h4>
                  <p>Vue的状态管理库</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </el-col>
          
          <el-col :span="12">
            <h3>后端技术</h3>
            <el-timeline>
              <el-timeline-item timestamp="运行环境" placement="top">
                <el-card>
                  <h4>Node.js</h4>
                  <p>JavaScript运行时环境</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="Web框架" placement="top">
                <el-card>
                  <h4>Express</h4>
                  <p>快速、极简的Node.js Web框架</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="数据库" placement="top">
                <el-card>
                  <h4>MySQL</h4>
                  <p>关系型数据库管理系统</p>
                </el-card>
              </el-timeline-item>
              <el-timeline-item timestamp="中间件" placement="top">
                <el-card>
                  <h4>CORS</h4>
                  <p>跨域资源共享中间件</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
            
            <h3>项目特性</h3>
            <el-tag type="success" style="margin: 5px;">响应式设计</el-tag>
            <el-tag type="success" style="margin: 5px;">组件化开发</el-tag>
            <el-tag type="success" style="margin: 5px;">RESTful API</el-tag>
            <el-tag type="success" style="margin: 5px;">错误处理</el-tag>
            <el-tag type="success" style="margin: 5px;">数据验证</el-tag>
            <el-tag type="success" style="margin: 5px;">分页功能</el-tag>
          </el-col>
        </el-row>
        
        <el-divider />
        
        <div class="contact-info">
          <h3>联系信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="开发者">mizudaze</el-descriptions-item>
            <el-descriptions-item label="项目地址">
              <el-link href="https://gitee.com/mizudaze/first_project" target="_blank">
                Gitee仓库
              </el-link>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">2024年</el-descriptions-item>
            <el-descriptions-item label="版本">v1.0.0</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('关于页面已加载')
})
</script>

<style scoped>
.about {
  max-width: 1200px;
  margin: 0 auto;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
}

.about-content h3 {
  color: #409eff;
  margin-bottom: 15px;
  border-bottom: 2px solid #409eff;
  padding-bottom: 5px;
}

.about-content p {
  line-height: 1.6;
  color: #606266;
  margin-bottom: 20px;
}

.contact-info {
  margin-top: 30px;
}

.el-timeline-item .el-card {
  margin-bottom: 10px;
}

.el-timeline-item .el-card h4 {
  margin: 0 0 5px 0;
  color: #303133;
}

.el-timeline-item .el-card p {
  margin: 0;
  color: #606266;
  font-size: 14px;
}
</style>


